<template>
  <div class="tabel_Background">
    <div id="title">{{title}}</div>
    <div class="container" ref="usage_ref"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'MtableRight',
    data() {
      return {
        chartInstance: null,
        allData: null
      }
    },
    mounted() {
      this.initChart()
      this.getData()
    },
    methods: {
      initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.usage_ref)
      },
      getData() {
        //服务器的数据请求位置

        // this.allData = ret
        this.updateChart()
      },
      updateChart() {
        let dataAxis = ['2021/3/1', '2021/3/2', '2021/3/3', '2021/3/4', '2021/3/5', '2021/3/6', '2021/3/7', '2021/3/8',
          '2021/3/9', '2021/3/10', '2021/3/11', '2021/3/12', '2021/3/13', '2021/3/14', '2021/3/15', '2021/3/16',
          '2021/3/17', '2021/3/18', '2021/3/19', '2021/3/20', '2021/3/21', '2021/3/22', '2021/3/23', '2021/3/24',
          '2021/3/25', '2021/3/26', '2021/3/27', '2021/3/28', '2021/3/29', '2021/3/30', '2021/3/31', '2021/4/1',
          '2021/4/2', '2021/4/3', '2021/4/4', '2021/4/5', '2021/4/6', '2021/4/7', '2021/4/8', '2021/4/9', '2021/4/10',
          '2021/4/11', '2021/4/12', '2021/4/13', '2021/4/14', '2021/4/15', '2021/4/16', '2021/4/17', '2021/4/18',
          '2021/4/19', '2021/4/20', '2021/4/21', '2021/4/22', '2021/4/23', '2021/4/24', '2021/4/25', '2021/4/26',
          '2021/4/27', '2021/4/28', '2021/4/29', '2021/4/30',
        ];
        // prettier-ignore
        let data = [22, 28, 19, 23, 29, 13, 21, 12, 25, 30, 22, 28, 4, 6, 19, 23, 29, 13, 22, 31, 12, 25, 23, 13, 21, 5,
          13, 14, 21, 12, 13, 10, 14, 21, 12, 13, 23, 10, 19, 5, 13, 14, 21, 12, 23, 24, 15, 23, 15, 10, 5, 13, 14,
          21, 20, 19, 12, 12, 22, 14, 6, 24
        ];
        let yMax = 30;
        let dataShadow = [];
        for (let i = 0; i < data.length; i++) {
          dataShadow.push(yMax);
        }
        const option = {
          grid: {
            top: '20%', // 等价于 y: '16%'
            left: '4%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',

          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              color: '#07DBFF'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#07DBFF'
              }
            },
            z: 10,
          },
          yAxis: {
            name: '单位：口',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#07DBFF'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#07DBFF'
            },
            min: 0, // 设置y轴刻度的最小值
            max: 30,
          },
          dataZoom: [{
              type: 'inside',
              start: 0,
              end: 20
            },
            {
              start: 0,
              end: 20
            }
          ],
          legend: {
            data: ['油井数'],
            right: 'right',
            textStyle: {
              color: '#ffffff',
            }
          },
          series: [{
            name: '油井数',
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FCA301'
                },
                {
                  offset: 0.5,
                  color: '#F6C502'
                },
                {
                  offset: 1,
                  color: '#F0E103'
                }
              ])
            },
            barWidth: 15, // 柱形的宽度
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#F72323'
                  },
                  {
                    offset: 0.7,
                    color: '#F72323'
                  },
                  {
                    offset: 1,
                    color: '#F68383'
                  }
                ])
              }
            },
            data: data
          }]
        }
        // Enable data zoom when user click bar.
        const zoomSize = 6;
        this.chartInstance.on('click', (params) => {
          this.chartInstance.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
          });
        });
        this.chartInstance.setOption(option);
      }
    },
    props: {
      title: String,
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
  .container {
    width: 4.75rem;
    height: 1.15rem;
    /* background-color: #867474; */
  }

  .tabel_Background {
    margin: 7.5px 0px 0px 0px;
    width: 4.85rem;
    min-width: 3rem;
    height: 1.48rem;
    border: 1px solid rgb(12, 50, 107);
    background: linear-gradient(to left, #206ED4, #206ED4) left top no-repeat,
      linear-gradient(to bottom, #206ED4, #206ED4) left top no-repeat,
      linear-gradient(to left, #206ED4, #206ED4) right top no-repeat,
      linear-gradient(to bottom, #206ED4, #206ED4) right top no-repeat,
      linear-gradient(to left, #206ED4, #206ED4) left bottom no-repeat,
      linear-gradient(to bottom, #206ED4, #206ED4) left bottom no-repeat,
      linear-gradient(to left, #206ED4, #206ED4) right bottom no-repeat,
      linear-gradient(to left, #206ED4, #206ED4) right bottom no-repeat;
    background-size: 3px 10px, 10px 3px, 3px 10px, 10px 3px;
    background-color: rgb(3, 25, 63);
  }

  #title {
    margin: 0 auto;
    text-align: center;
    font-size: 10px;
    line-height: 20px;
    /* border-bottom: 3px solid rgba(255, 255, 255, 0.075); */
    height: 24px;
    background-origin: border-box;
    background-image: url("../../assets/title.png");
    background-position: top;
    background-size: 200% 180%;
    /* background: radial-gradient(circle at center top,#1569D8,rgb(0, 82, 189),rgb(0, 49, 114),rgb(0, 47, 109),rgb(0, 39, 90),rgb(0, 26, 59),rgba(0, 24, 66, 0)); */
  }
</style>
